<template>
    <a-card :bordered="false">
        <!-- 左侧文件树 -->
        <a-col :span="4" class="clName">
            <a-tree
                    :treeData="treeData"
                    :defaultExpandAll="defaultExpandAll"
                    @select="this.onSelect"
                    style="height: 500px;overflow-y: auto;"
            >
            </a-tree>
        </a-col>
        <!-- 中间面板 -->
        <a-col :span="2"/>
        <!--右侧缩略图-->
        <a-col :span="18">
            <a-spin tip="Loading..." :spinning="spinning">
                <div v-for="(file, key) in dataSource" :key="key">
                    <a-row>
                        <a-col :span="24"><p><a-divider orientation="left">{{ file.fileName }}</a-divider></p></a-col>
                        <!-- 预览区域 -->
                        <a-col :span="24">
                            <template v-if="file.filePdfPath">
                                <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                                    <div style="width: 100%;height: 100%;position: relative;padding: 8px;" @click="pdfPreview(file.title)">
                                        <img style="width: 100%;" src="~@/assets/pdf4.jpg">
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                (暂无材料，点击"选择文件"或"扫描上传"上传文件)
                            </template>
                        </a-col>
                    </a-row>
                </div>
            </a-spin>
        </a-col>
        <pdf-preview-modal ref="pdfmodal"></pdf-preview-modal >
    </a-card>
</template>

<script>

import { getAction } from '@/api/manage'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import Vue from 'vue'
import PdfPreviewModal from './part/PdfPreviewModal'
const mockdata = [{
  "id": "1",
  "key": "1",
  "title": "实例.pdf",
  "fileCode": "shili",
  "fileName": "实例",
  "filePdfPath": "实例"
}]

export default {
  name: "JeecgPdfView",
  components: {
    PdfPreviewModal
  },
  data () {
    return {
      description: 'PDF预览页面',
      // 文件类型集
      treeData: [{
        title: '所有PDF电子档',
        key: '0-0',
        children: mockdata }],
      // 文件数据集
      dataSource: mockdata,
      allData: mockdata,
      // 上传文件集
      defaultExpandAll: true,
      // 加载中
      spinning: false,
      url: {
        pdfList: "/api/pdfList"
      }
    }
  },
  created() {
    //this.loadData();
  },
  methods: {
    loadData () {
      this.spinning = false;
      getAction(this.url.pdfList).then((res) => {
        if (res.length > 0) {
          this.allData = res;
          this.dataSource = res;
          this.treeData[0].children = res;
        }
        this.spinning = false;
      })
    },
    pdfPreview: function(title) {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = { "X-Access-Token": token }
      this.$refs.pdfmodal.previewFiles(title, token);
    },
    // 选择文件类型
    onSelect (selectedKeys, info) {
      this.dataSource = [];
      if (selectedKeys[0] === undefined || selectedKeys[0] === '0-0') {
        this.dataSource = this.allData;
      } else {
        this.dataSource.push(info.node._props.dataRef);
      }
      console.log("SELECT-->dataSource", this.dataSource);
    },
    // model回调
    modalFormOk () {
      this.loadData();
    }
  }
}
</script>

<style scoped>
    .clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{width:10px}
</style>
